<div class="school-supervision-container w100 h100">
  <div class="content-box" *ngIf="!isView">
    <div class="table-top-search">
      <div class="top-search-left">
        <button nz-button nzType="primary" (click)="clickAdd()">
          <i nz-icon nzType="plus" nzTheme="outline"></i>新增
        </button>
        <button nz-button nzType="default"
                nz-popconfirm
                nzOkType="danger"
                nzTitle="确定删除所选数据吗?"
                (nzOnCancel)="cancelFn()"
                (nzOnConfirm)="deleteAll()"
                [disabled]="canDelete"
                nzPlacement="top"
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>删除
        </button>
      </div>
      <div class="top-search-right">
        <label>
          部门:
          <input type="text" nz-input [(ngModel)]="searchParams.deptName" placeholder="请输入">
        </label>
        <label>
          姓名:
          <input type="text" nz-input [(ngModel)]="searchParams.teacherName" placeholder="请输入">
        </label>
        <label>
          工号:
          <input type="text" nz-input [(ngModel)]="searchParams.teacherNumber" placeholder="请输入">
        </label>
        <div class="table-top-btn">
          <button nz-button nzType="primary" (click)="clickSearch()">查询</button>
          <button nz-button nzType="default" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </div>
    <div class="table-box">
      <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
      <nz-table
        nzBordered
        [nzData]="dataList"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo.first"
        [nzTotal]="pageInfo.totalRecords"
        [nzShowTotal]="totalTemplate"
        [nzPageSize]="pageInfo.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[10,20,30,50,100]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="changePageIndex($event)"
        (nzPageSizeChange)="changePageSize($event)"
      >
        <thead>
        <tr>
          <th class="tableCheck"
              nzShowCheckbox
              [(nzChecked)]="isAllCheck"
              [nzIndeterminate]="isIndeterminate"
              (nzCheckedChange)="checkAll($event)"
          ></th>
          <th>序号</th>
          <th>部门</th>
          <th>姓名</th>
          <th>工号</th>
          <th>督导部门</th>
          <th>督导课程</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of dataList; let i = index">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[item.id]"
            (nzCheckedChange)="refreshStatus()"
          ></td>
          <td>{{i + 1}}</td>
          <td>{{item.deptName}}</td>
          <td>{{item.teacherName}}</td>
          <td>{{item.teacherNumber}}</td>
          <td>
            <span *ngFor="let ele of item.deptList">
              {{ele.deptName}}
            </span>
          </td>
          <td>
            <span *ngFor="let ele of item.courseList">
              {{ele.courseName}}
            </span>
          </td>
          <td>
            <span class="operaFont firOpera" (click)="clickEdit(item)">编辑</span>
            <span class="operaFont operaTao"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除该数据吗?"
                  (nzOnConfirm)="clickDelete(item.id)"
                  nzPlacement="top"
            >删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
  <div class="view-modal-box" *ngIf="isView">
    <div class="operate-box">
      <div class="title flex flex-space-between">
        {{formObj.id ? '编辑' : '新增'}}系部督导
        <div class="back-info operaFont" (click)="isView = false">
          返回上一级<i class="fa fa-reply m-l-sm"></i>
        </div>
      </div>
      <div class="content">
        <form nz-form [formGroup]="validateForm">
          <nz-form-item>
            <nz-form-label [nzSm]="4" nzRequired>
              部门
            </nz-form-label>
            <nz-form-control [nzSm]="20">
              <nz-tree-select
                [(ngModel)]="formObj.deptId" class="w100"
                nzShowSearch
                nzAllowClear
                [nzNodes]="deptList"
                nzPlaceHolder="请选择"
                (ngModelChange)="changeDept($event)"
                formControlName="deptId">
              </nz-tree-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="4" nzRequired>
              校级督导员
            </nz-form-label>
            <nz-form-control [nzSm]="20">
              <nz-select nzPlaceHolder="请选择"
                         nzShowSearch
                         nzAllowClear
                         [(ngModel)]="formObj.teacherId"
                         formControlName="teacherId"
                         class="w100">
                <nz-option *ngFor="let option of teacherList"
                           [nzValue]="option.id"
                           [nzLabel]="option.name + ' ' + option.number">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="4" nzRequired>
              督导部门
            </nz-form-label>
            <nz-form-control [nzSm]="20">
              <nz-tree-select
                [(ngModel)]="formObj.deptIdList" class="w100"
                nzShowSearch
                nzAllowClear
                nzMultiple
                [nzNodes]="deptList"
                nzPlaceHolder="请选择"
                formControlName="deptIdList"
                (ngModelChange)="changeDeptIdList($event)"
              >
              </nz-tree-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="4">
              督导课程
            </nz-form-label>
            <nz-form-control [nzSm]="20">
              <nz-select nzPlaceHolder="请选择"
                         nzShowSearch
                         nzAllowClear
                         nzMode="multiple"
                         [(ngModel)]="formObj.courseIdList"
                         formControlName="courseIdList"
                         class="w100">
                <nz-option *ngFor="let option of courseList"
                           [nzValue]="option.id"
                           [nzLabel]="option.number + ' ' + option.name">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      <div class="btn-box">
        <button nz-button nzType="default" (click)="isView = false">取消</button>
        <button nz-button nzType="primary" (click)="clickSave()">保存</button>
      </div>
    </div>
  </div>
</div>
